<!--  -->
<template>
    <div class="main">
        <tabs :tabPane="tabPaneList" v-model="tabPaneList[0].name" />
        <continer>
            <template v-slot:content>
                <div class="main-content">
                  <OperationalIndicator style="margin-bottom: 10px" :allData="tabData" :agentState='agentState.filter(i=>i.createUser !== "system")'></OperationalIndicator>

                  <el-tabs style="margin-bottom: 10px" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-if='getLimits("call_monitor_agent")' label="座席监控" name="agent">
                      <agent :allData="agentAllData" :agentState='agentState' @search='reLink'></agent>
                    </el-tab-pane>
                    <el-tab-pane v-if='getLimits("call_monitor_queue")' label="技能组监控" name="queue">
                      <queue :allData="queueAllData" @search='reLink'></queue>
                    </el-tab-pane>
                    <el-tab-pane v-if='getLimits("call_monitor_trunk_number")' label="服务号监控" name="trunkNumber">
                      <trunkNumber :allData="trunkNumberAllData" @search='reLink' />
                    </el-tab-pane>
                  </el-tabs>
                </div>

            </template>
        </continer>
    </div>
</template>

<script lang='ts'>
import io from 'socket.io-client';
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import OperationalIndicator from './components/operationalIndicator2.vue'
import { CommonModule } from '@/store/modules/common/index'

import agent from './components/tables/agent.vue'
import queue from './components/tables/queue.vue'
import trunkNumber from './components/tables/trunkNumber.vue'
import { commonAction } from '@/utils/common';
@Component({ name: 'CallMonitoring', components: { tabs, continer, OperationalIndicator, agent, queue, trunkNumber } })
export default class CallMonitoring extends Vue {
    private $store
    private $getCache
    public allData = []
    public agentAllData = []
    public queueAllData = []
    public trunkNumberAllData = []
    public tabData: any = {}
    private tabPaneList = [
      {
        label: '通话监控概览',
        name: 'report_agent_workLoad',
        _id: 'report_agent_workLoad'
      }
    ]

    private activeName = 'agent'
    private handleClick () {
      this.reLink()
    }

    // #region
    private timer
    private socket
    private getLink () {
      const data = {
        transport: 'websocket',
        logintoken: CommonModule.session.user && CommonModule.session.user.loginToken ? CommonModule.session.user.loginToken : '',
        sessionid: this.$store.state.common.session.user._id
      }
      const socketData = { reconnectionDelay: 3000, query: data }
      socketData['force new connection'] = true
      let url = this.websocketUrl
      if (window.location.host.indexOf('localhost') > -1) { // 本地代理https环境还是http环境，自己修改
        url = `wss://${this.websocketUrl}`
      }
      const emitData = {
        category: this.activeName
      }
      const socket = io(url, socketData)
      this.socket = socket
      socket.on('monitor', (q, m) => {
        if (Array.isArray(m)) {
          this.$set(this, `${this.activeName}AllData`, m)
        } else {
          if (m?.hasOwnProperty('incoming')) {
            this.$set(this, 'tabData', m)
          }
        }
      })
      socket.emit('monitor', 'bizMonitor', emitData)
      socket.emit('monitor', 'bizMonitor', { category: 'summary' })
      this.timer = setInterval(() => {
        socket.emit('monitor', 'bizMonitor', emitData)
        socket.emit('monitor', 'bizMonitor', { category: 'summary' })
      }, 3000)
    }

    get websocketUrl () {
      return (CommonModule.initConfig as any).pushServer.monitorUrl
    }

  private agentState = []
  private getAgentState () {
    const data = { url: '/call/action/config/phoneBarStatus/list', method: 'POST', data: {} }
    commonAction(data).then(res => {
      if (res.success && res.list) {
        this.agentState = res.list.filter(i => i.status === 'enable') || [] // 取启用的状态
      }
    })
  }

  private getLimits (val) {
    const arr = this.$store.state.common.session.user.limits || []
    return arr.includes(val)
  }

  private realLimits () {
    const arr = ['call_monitor_agent', 'call_monitor_queue', 'call_monitor_trunk_number']
    const list: string[] = []
    arr.forEach(i => {
      if (this.getLimits(i)) {
        list.push(i)
      }
    })
    const obj = {
      call_monitor_agent: 'agent',
      call_monitor_queue: 'queue',
      call_monitor_trunk_number: 'trunkNumber'
    }
    this.activeName = obj[list[0]] || agent
  }

  private created () {
    this.realLimits()
    this.getAgentState()
  }

  private deactivated () {
    clearInterval(this.timer)
    this.timer = -1
    this.socket.close()
  }

  private activated () {
    this.getLink()
  }

  private reLink () {
    clearInterval(this.timer)
    this.timer = -1
    this.socket.close()
    this.getLink()
  }
  // #endregion
}
</script>
<style lang='stylus' scoped>
.main
  padding-top 10px
  height 100%
/deep/.handle-wrapper-header
  display none
/deep/ .el-tabs__item.is-active
  color #008BEE
/deep/.straightLine
  width 100%
  height: 1px;
  background: #ECF0F3;
  margin-bottom 16px;
</style>
